//引入一个包 用来拼接路径
const path = require("path");
/**
 * @type {import ('webpack').Configuration}
 */
//引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const config = {
  entry: "./src/index.ts", //指定入口文件
  output: {
    //指定打包文件的目录
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    //告诉webpack不使用箭头函数
    environment: {
      arrowFunction: false,
    },
  },
  //指定webpack打包时要使用的模块
  module: {
    //指定要加载的规则
    rules: [
      {
        test: /\.ts$/, //指定规则生效的文件
        use: [
          //要使用的loader  谁先执行，谁写道下面， 目前的执行顺序是：ts-loader   --> babel-loader
          // 'babel-loader',
          {
            loader: "babel-loader",
            options: {
              //设置预定义的环境
              presets: [
                [
                  "@babel/preset-env",
                  //配置信息
                  {
                    targets: {
                      chrome: "78", //浏览器兼容的版本
                      ie: "11",
                    },
                    corejs: "3", //指定corejs版本
                    useBuiltIns: "usage", //表示按需加载
                  },
                ],
              ],
            },
          },
          "ts-loader",
        ],
        //用ts-loader去处理以ts结尾的文件
        exclude: path.resolve(__dirname, "node_modules"), //要排除的文件夹
      },
    ],
  },
  //配置webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      //    title:'这是一个自定义的title'
      template: "./src/index.html", //指定模板
    }),
    new CleanWebpackPlugin(),
  ],
  //用来设置引用模块
  resolve: {
    extensions: [".ts", ".js"],
  },
  mode: "development",
};
//webpack中所有的配置信息都应该写在module.exports中
module.exports = config;
